<template>
  <div class="my-demand">
    <menu-content-layout title="我的需求">
      <template slot="icon">
        <img src="~/assets/images/my-demand1.png" alt="" />
      </template>

      <template slot="content">
        <menu-content-tabs :tabs="tabs" @switch-tab="handleSwitchTab" />
        <div v-if="$route.name === 'MyDemand'" class="list-wrap">
          <div class="list">
            <div
              class="item"
              v-for="(item, index) in list"
              :key="index"
              @click="$router.push({ path: 'my-demand/details/' + item.id })"
            >
              <div class="pic">
                <img :src="item.img_list" v-if="item.img_list[0] !== 'undefined'" class="objectCover"  alt=""/>
                <img class="objectCover" v-else src="~/assets/images/nopic.jpg" alt="" />
              </div>
              <div class="info">
                <div class="name">{{ item.goods_info }}</div>
                <div class="num">
                  <div class="send-num">发送商家数量：{{ item.send_num || 0 }}</div>
                  <div class="response-num">已响应商家数量：{{ item.receive || 0 }}</div>
                </div>
                <div class="date">发布时间：{{ item.create_time }}</div>
              </div>
              <div class="btns">
                <div v-if="item.status === 1" class="btn reviewing">审核中</div>
                <div v-if="item.status === 0" class="btn published">已发布</div>
                <div v-if="item.status === 2" class="btn waiting">待发布</div>
                <div v-if="item.status === 4" class="btn notpassed">审核未通过</div>
                <div v-if="item.status === 9" class="btn closed">已关闭</div>
                <!-- <div v-if="item.status === 9" class="btn cancel">已取消</div> -->
                <p v-if="item.status === 1" class="text-btn cancel" @click.stop="quit(item.id)">取消</p>
                <!-- <p v-if="item.status === 0" class="text-btn close" @click.stop>关闭</p> -->
                <p v-if="item.status === 2" class="text-btn publish" @click.stop="showTc(item.id)">发布</p>
                <p v-if="[2, 4].includes(item.status)" class="text-btn edit" @click.stop="edit(item.id)">编辑</p>
                <p v-if="[2, 4, 5].includes(item.status)" class="text-btn delete" @click.stop="dele(item.id)">删除</p>
              </div>
            </div>
          </div>
          <nodata message="暂时没有需求" :status="listStatus"></nodata>
          <m-pagination
            :pagination="total"
            :page-size="limit"
            @changePage="changeThisPage"
          />
        </div>
        <router-view />
      </template>
    </menu-content-layout>
    <m-dialog title="平台提示" :show-dialog.sync="showDialog">
      <p class="text" style="margin-bottom: 50px; font-size: 16px; line-height: 26px">
        发布则默认您已阅读，理解并同意找包装网的委托平台规则。 是否立即发布？
      </p>
      <div class="btns" style="display: flex; justify-content: center">
        <m-button
          width="180"
          type="dark"
          @click="closeTc"
          style="margin-right: 10px"
          >取消</m-button>
        <m-button width="180" @click="publish">确定</m-button>
      </div>
    </m-dialog>
    <cancel-demand :showDialog.sync='showDialogCancel' :demandId='id' @handleClose='handleClose' />
  </div>
</template>

<script>
import MenuContentLayout from "@/components/common/menu-content-layout/MenuContentLayout"
import MenuContentTabs from "@/components/common/menu-content-tabs/MenuContentTabs"
import MButton from "@/components/common/m-button/MButton"
import MPagination from "@/components/common/m-pagination/MPagination"
import MDialog from "@/components/common/m-dialog/MDialog"
import CancelDemand from './components/cancelDemand.vue'
import { getMyDemands, pubMyDemands, delMyDemands } from "@/request/api"

export default {
  name: "MyDemand",
  components: {
    MPagination,
    MButton,
    MenuContentTabs,
    MenuContentLayout,
    MDialog,
    CancelDemand
  },
  data() {
    return {
      tabs: [
        { name: "全部询盘", value: "-1" },
        { name: "待发布", value: "2" },
        { name: "审核中", value: "1" },
        { name: "已发布", value: "0" },
        { name: "审核未通过", value: "4" },
        { name: "已完成", value: "3" },
        {name: '已关闭', value: "9"}
      ],
      list: [],
      listStatus: 1,
      page: 1,
      total: 1,
      limit: 5,
      state: -1,
      showDialog: false,
      showDialogCancel: false,
      optionId: "",
      id: ""
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleSwitchTab(index) {
      this.state = index.value
      this.getList()
      // 详情页面中切换tab返回
      if (this.$route.name === "MyDemandDetails") {
        this.$router.push({ name: "MyDemand" })
      }
    },
    /** 关闭 */
    handleClose() {
      this.showDialogCancel = false;
      this.getList()
    },
    getList() {
      this.list = [];
      this.listStatus = 1
      this.$common.toTop()
      let data = {
        page: this.page,
        limit: this.limit,
        data: {
          demand_type: 0,
          state: this.state
        }
      }
      // 获取委托列表
      getMyDemands(data).then((res) => {
          if (res.status === 200) {
            this.list = res.data.data
            this.total = res.data.total
            if (this.total === 0) {
              this.listStatus = 0
            } else {
              this.listStatus = 2
            }
            window.scrollTo({ top: 0 })
          } else {
            this.listStatus = 0
            this.$toast.show(res.message, 1000, false)
          }
        }).catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 换页
    changeThisPage(page) {
      this.page = page
      this.getList()
    },
    // 编辑委托
    edit(id) {
      this.$router.push({ path: "/require", query: { id: id } })
    },
    // 取消审核该需求
    quit(id) {
      this.showDialogCancel = true;
      this.id= id;
    },
    // 删除委托
    dele(id) {
      let that = this
      this.$messageBox.confirm("确定删除该需求?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(async () => {
          delMyDemands(id).then((res) => {
            if (res.status === 200) {
              that.$toast.show("删除成功", 1000, false)
              that.getList()
            } else {
              that.$toast.show(res.message, 1000, false)
            }
          }).catch(err => {
            this.$message.error(err.message)
          })
        }).catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 显示平台提示发布委托
    showTc(id) {
      this.showDialog = true
      this.optionId = id
    },
    // 关闭平台提示发布委托
    closeTc() {
      this.showDialog = false
      this.optionId = ""
    },
    // 发布委托
    publish() {
      this.showDialog = false
      let data = {
        id: this.optionId,
        status: 1
      }
      pubMyDemands(data).then((res) => {
        if (res.status === 200) {
          this.$toast.show("发布成功", 1000, false)
          this.getList()
        } else {
          this.$toast.show(res.message, 1000, false)
        }
      }).catch((err) => {
        this.$message.error(err.message)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";
/deep/ .el-button--primary {
  background: #e48b2c;
}
.my-demand {
  .list {
    margin-top: 30px;
    margin-bottom: 50px;

    .item {
      background-color: rgb(243, 244, 247);
      border: solid 1px #eaeaea;
      padding: 15px;
      display: flex;
      align-items: center;
      position: relative;
      cursor: pointer;

      &:not(:last-of-type) {
        margin-bottom: 15px;
      }

      .pic {
        width: 138px;
        height: 138px;
        border: none;
        margin-right: 15px;
        img {
          border-radius: 50% !important;
        }
      }

      .info {
        color: #666;
        font-size: 16px;
        margin-top: -40px;

        .name,
        .num {
          margin-bottom: 15px;
        }

        .num {
          display: flex;

          .send-num {
            margin-right: 15px;
          }
        }

        .date {
          font-size: 14px;
          color: #969696;
        }
      }

      .btns {
        position: absolute;
        right: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .btn {
          width: 108px;
          height: 45px;
          border-radius: 10px;
          line-height: 45px;
          text-align: center;
          font-size: 16px;
          color: #fff;
          margin-bottom: 10px;
        }

        .reviewing {
          background-color: $theme-color-1;
        }

        .published {
          background-color: rgb(59, 169, 217);
        }

        .waiting {
          background-color: rgb(255, 104, 13);
        }

        .notpassed {
          background-color: rgb(255, 32, 32);
        }

        .closed {
          background-color: rgb(102, 102, 102);
        }

        .text-btn {
          cursor: pointer;
          margin-bottom: 8px;
          &:hover {
            color: $theme-color-1;
          }
        }
      }
    }
  }
}
</style>
